<main id="main-content" class="crayons-layout crayons-layout--limited-l gap-0">
  <div
    class="crayons-card crayons-card--secondary text-styles text-styles--secondary text-padding -mb-1 mx-3 m:mx-6 mt-3">
    <%= @article.title %>
  </div>

  <div class="crayons-card text-padding">
    <h1 class="crayons-subtitle-1 mb-2"><%= t("views.articles.delete.heading") %></h1>
    <p class="fs-l mb-4">
      <%= t("views.articles.delete.desc.text_html",
            action: link_to(@article.published ? t("views.articles.delete.desc.unpublish") : t("views.articles.delete.desc.edit"), "#{@article.path}/edit", data: { no_instant: "" })) %>
    </p>

    <%= form_tag article_path(@article.id), method: :delete do %>
      <button class="crayons-btn crayons-btn--danger"><%= t("views.articles.delete.action.button") %></button>

      <a data-no-instant href="<%= @article.path %>/edit" class="crayons-btn crayons-btn--secondary">
        <%= @article.published ? t("views.articles.delete.action.unpublish") : t("views.articles.delete.action.edit") %>
      </a>

      <a data-no-instant href="<%= dashboard_path %>" class="crayons-btn crayons-btn--ghost"><%= t("views.articles.delete.action.cancel") %></a>
    <% end %>
  </div>
</main>
